<template>
  <u-container-layout>
    <zlrt-table :p="ctx">
      <template #before>
        <zlrt-search :p="ctx"> </zlrt-search>
        <div class="tool-bar">
          <el-button
            type="danger"
            v-hasPermit="['wms-order:request:del']"
            icon="Delete"
            :disabled="!ctx.selected.length"
            @click="ctx.batchDelete()"
          >
            批量删除
          </el-button>
          <span style="float: right">
            <!-- <el-upload ref="uploadRef" style="display: inline-block;position: relative;top: 4px;margin-right: 10px;"
              v-model:file-list="fileList" action="#" :http-request="options => uploadFile(options)"
              :show-file-list="false" :limit="1">
              <el-button type="warning" :loading="importLoading" icon="Upload" v-hasPermit="['wms-order:request:save']">
                导入材料单
              </el-button>
            </el-upload> -->
            <el-button
              type="success"
              v-hasPermit="['wms-order:request:list']"
              :loading="ctx.exportLoading"
              icon="Download"
              @click="ctx.export()"
            >
              导出
            </el-button>
            <el-button
              type="primary"
              v-hasPermit="['wms-order:request:save']"
              icon="Plus"
              @click="ctx.showEdit()"
            >
              添加
            </el-button>
          </span>
        </div>
      </template>
      <template #date="scope">
        {{ ctx.other.formatDt(scope.row.date) }}
      </template>
      <template #status="scope">
        {{ ctx.other.getStatus(scope.row.status) }}
      </template>
      <template #operation="scope">
        <el-button
          v-if="scope.row.status === '99' || scope.row.status === '100'"
          type="primary"
          v-hasPermit="['wms-order:request:detail']"
          link
          size="small"
          icon="Edit"
          @click="ctx.other.showDetail(scope.row)"
        >
          明细
        </el-button>
        <el-button
          v-if="scope.row.status === '0'"
          type="primary"
          v-hasPermit="['wms-order:request:save']"
          link
          size="small"
          icon="Edit"
          @click="ctx.other.showEdit(scope.row)"
        >
          编辑
        </el-button>
        <el-button
          v-hasPermit="['wms-order:request:del']"
          type="danger"
          link
          size="small"
          icon="Delete"
          @click="ctx.del(scope.row.id)"
        >
          删除
        </el-button>
      </template>
      <template #after>
        <el-dialog
          v-model="ctx.editVisible"
          :title="ctx.editAction + ctx.title"
          width="97%"
          append-to-body
          top="3vh"
          :close-on-click-modal="false"
          @close="ctx.closeEdit()"
        >
          <el-form
            :ref="(e) => (ctx.formRef = e)"
            :model="ctx.editData"
            :rules="ctx.rules"
            v-loading="ctx.editLoading"
            label-width="120px"
            class="demo-ruleForm"
          >
            <el-form-item label="项目" prop="projectName">
              <el-select
                v-model="ctx.editData.projectName"
                filterable
                placeholder="请选择项目"
                @change="ctx.other.handelProjectChange"
                style="width: 100%"
              >
                <el-option
                  v-for="item in projectOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="图纸" prop="blueprintName">
              <el-select
                v-model="ctx.editData.blueprintName"
                placeholder="请选择图纸"
                @change="ctx.other.handelBpnChange"
                style="width: 100%"
                multiple
              >
                <el-option
                  v-for="item in requirementOrder"
                  :key="item.id"
                  :label="item.blueprintName"
                  :value="item.blueprintName"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-divider content-position="center">物料明细</el-divider>
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button
                  type="primary"
                  size="small"
                  icon="Plus"
                  @click="ctx.other.addGoods"
                >
                  添加
                </el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="danger"
                  icon="delete"
                  size="small"
                  @click="ctx.other.delGoods"
                  :disabled="
                    !ctx.editData.orderGoodsList ||
                    !ctx.editData.orderGoodsList.length
                  "
                  >删除</el-button
                >
              </el-col>
            </el-row>
            <el-table
              :data="ctx.editData.orderGoodsList"
              style="width: 100%"
              @selection-change="ctx.other.handleGoodsSelectionChange"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column label="材料清单" align="center">
                <el-table-column
                  label="物料名称"
                  prop="reqSkuName"
                  width="100"
                ></el-table-column>
                <el-table-column
                  label="规格型号"
                  prop="reqSpecification"
                  width="250"
                ></el-table-column>
                <el-table-column
                  label="备注"
                  prop="reqRemark"
                  width="100"
                ></el-table-column>
              </el-table-column>
              <el-table-column prop="skuName" label="物料名称" width="420">
                <template #default="scope">
                  <el-select
                    style="width: 390px"
                    size="large"
                    v-model="scope.row.skuName"
                    filterable
                    remote
                    reserve-keyword
                    :remote-method="getGoodsList"
                    :loading="loading"
                    @change="handleSkuChange($event, scope)"
                  >
                    <el-option
                      v-for="item in goodsOptions"
                      :key="item.id"
                      :label="item.skuName"
                      :value="item.skuName"
                    >
                      <template #default>
                        <div class="flex-box">
                          <div style="flex: 1">{{ item.skuName }}</div>
                          <div style="width: 120px; text-align: right">
                            {{ item.number + item.unit }}
                          </div>
                        </div>
                      </template>
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="barCode" label="物料编码" width="150">
                <template #default="scope">
                  <el-select
                    style="width: 130px"
                    size="large"
                    v-model="scope.row.barCode"
                    filterable
                    remote
                    reserve-keyword
                    :remote-method="getGoodsListCode"
                    :loading="loading"
                    @change="handleSkuChangeCode($event, scope)"
                  >
                    <el-option
                      v-for="item in goodsOptionsCode"
                      :key="item.id"
                      :label="item.barCode"
                      :value="item.barCode"
                    >
                      <template #default>
                        <div class="flex-box">
                          <div style="flex: 1">{{ item.barCode }}</div>
                        </div>
                      </template>
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <!-- <el-table-column prop="specification" label="规格型号" width="120">
                <template #default="scope">
                  {{ scope.row.specification || '-' }}
                </template>
              </el-table-column> -->
              <el-table-column label="库存总数" width="90">
                <template #default="scope">
                  {{ getInventoryNum(scope.row.inventoryList) }}
                </template>
              </el-table-column>
              <el-table-column label="库存占用" width="60">
                <template #default="scope">
                  <el-popover
                    :width="900"
                    trigger="click"
                    v-if="
                      scope.row.inventoryList &&
                      scope.row.inventoryList.length > 0
                    "
                  >
                    <template #reference>
                      <el-button
                        type="primary"
                        link
                        size="small"
                        v-if="
                          ctx.other.getList(scope.row.inventoryList)['flag']
                        "
                        >详情</el-button
                      >
                    </template>
                    <el-table
                      :data="ctx.other.getList(scope.row.inventoryList)['data']"
                    >
                      <el-table-column
                        property="projectName"
                        label="项目名称"
                      />
                      <el-table-column
                        property="locationName"
                        label="库位名称"
                      />
                      <el-table-column
                        property="locationCode"
                        label="库位编码"
                      />
                      <el-table-column width="150" prop="number" label="数量" />
                      <el-table-column width="100" prop="unit" label="单位" />
                      <el-table-column width="90" label="操作">
                        <template #default="current">
                          <el-button
                            link
                            type="primary"
                            size="small"
                            @click="addRemark(current.row, scope.row)"
                            >添加备注</el-button
                          >
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column prop="number" label="请购数量" width="100">
                <template #default="scope">
                  <el-input style="width: 100%" v-model="scope.row.number" />
                </template>
              </el-table-column>
              <el-table-column prop="unit" label="单位" width="60">
                <template #default="scope">
                  {{ scope.row.unit || "-" }}
                </template>
              </el-table-column>
              <el-table-column prop="remark" label="备注" width="200">
                <template #default="scope">
                  <el-input type="textarea" v-model="scope.row.remark">
                  </el-input>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button
                v-if="ctx.editData.status === '0'"
                v-hasPermit="['wms-order:request:check']"
                type="success"
                @click="ctx.other.pass(ctx.editData)"
                >审核通过</el-button
              >
              <el-button @click="ctx.editVisible = false">取消</el-button>
              <el-button
                type="primary"
                :loading="finishLoading"
                @click="ctx.other.save()"
                >确定</el-button
              >
              <!-- <el-button @click="ctx.other.export()">导出</el-button> -->
              <!-- <el-button @click="ctx.editVisible = false">取消</el-button> -->
            </span>
          </template>
        </el-dialog>
      </template>
    </zlrt-table>

    <el-dialog
      v-model="requirementDialog"
      title=""
      width="90%"
      append-to-body
      :close-on-click-modal="false"
      top="3vh"
    >
      <el-form :model="ctx.editData" label-width="120px">
        <el-form-item label="项目" prop="projectName">
          <el-select
            v-model="ctx.editData.projectName"
            filterable
            allow-create
            placeholder="请选择项目"
            @change="ctx.other.handelProjectChange"
          >
            <el-option
              v-for="item in projectOptions"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-divider content-position="center">物料明细</el-divider>
      <el-table
        :data="requirementList"
        default-expand-all
        :row-style="tableRowStyle"
      >
        <el-table-column
          prop="skuName"
          label="物料名称"
          width="600"
        ></el-table-column>
        <el-table-column
          prop="barCode"
          label="物料编码"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="specification"
          label="规格型号"
        ></el-table-column>
        <el-table-column prop="number" label="数量"></el-table-column>
        <el-table-column type="expand">
          <template #default="prop">
            <div class="sku-search">
              <el-row>
                <el-col :span="8">
                  <el-input
                    v-model="prop.row.searchSkuName"
                    @blur="ctx.other.searchSku(prop.row)"
                    @keyup.enter="ctx.other.searchSku(prop.row)"
                  />
                </el-col>
                <el-col :span="16">
                  <el-input
                    v-model="prop.row.searchSpecification"
                    @blur="ctx.other.searchSku(prop.row)"
                    @keyup.enter="ctx.other.searchSku(prop.row)"
                  />
                </el-col>
              </el-row>
            </div>
            <el-table :data="prop.row.goodsList" :show-header="false">
              <!-- <el-table-column type="selection" width="55" /> -->
              <el-table-column
                prop="skuName"
                label="物料名称"
              ></el-table-column>
              <el-table-column
                prop="barCode"
                label="物料编码"
              ></el-table-column>
              <!-- <el-table-column prop="specification" label="规格型号">
                <template #default="scope">
                  {{ scope.row.specification || '-' }}
                </template>
              </el-table-column> -->
              <el-table-column prop="number" label="数量">
                <template #default="prop">
                  <span>库存数量：{{ prop.row.number || 0 }}</span
                  >｜
                  <span>
                    <span>请购数量：</span>
                    <el-input
                      type="number"
                      v-model.trim="prop.row.needNumber"
                      style="width: 100px"
                    ></el-input>
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="unit" label="单位" width="90">
                <template #default="scope">
                  {{ scope.row.unit || "-" }}
                </template>
              </el-table-column>
              <el-table-column prop="remark" label="备注" width="200">
                <!-- <template #default="scope">
                  {{ scope.row.unit || '-' }}
                </template> -->
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="requirementDialog = false">取消</el-button>
          <el-button type="primary" @click="confirm">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog
      v-model="detailCtx.editVisible"
      title="请购单明细"
      width="90%"
      append-to-body
      top="3vh"
      :close-on-click-modal="false"
    >
      <el-form
        :ref="(e) => (ctx.formRef = e)"
        :model="detailCtx.editData"
        v-loading="detailCtx.editLoading"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-table :data="detailCtx.editData.orderGoodsList" style="width: 100%">
          <el-table-column prop="skuName" label="物料名称"></el-table-column>
          <el-table-column
            prop="barCode"
            label="物料编码"
            width="180"
          ></el-table-column>
          <el-table-column prop="specification" label="规格型号" width="200">
            <template #default="scope">
              {{ scope.row.specification || "-" }}
            </template>
          </el-table-column>
          <el-table-column prop="number" label="请购数量" width="90">
            <template #default="scope">
              {{ scope.row.number || "0" }}
            </template>
          </el-table-column>
          <el-table-column prop="unit" label="单位" width="90">
            <template #default="scope">
              {{ scope.row.unit || "-" }}
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button
            type="danger"
            v-hasPermit="['wms-order:request:check']"
            @click="abandon"
            >弃审</el-button
          >
        </span>
      </template>
    </el-dialog>

    <!-- <goods :dialogVisible="true" :searchObj="{skuName: '123', specification: '123', barCode: '123'}" ></goods> -->
  </u-container-layout>
</template>

<script lang="ts" src="./request" />

<style lang="scss" scoped>
.tableRowClassName {
  border: solid red 1px;
  background-color: red;
}
.mb8 {
  margin-bottom: 8px;
}
.flex-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
</style>
